<template>
  <div>
    <div style="width:1000px">
      <el-form ref="form" label-width="120px">
        <el-form-item>
          <el-link href="https://wms2.obs.cn-north-4.myhuaweicloud.com/dianshang_receive.xlsx" type="primary">下载模板</el-link>
        </el-form-item>

        <el-form-item>
          <el-upload
            v-model="form.filePath"
            ref="uploadExcel"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :on-error="handleError"
            accept=".xls,.xlsx"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeUploadFile"
            :before-remove="beforeRemove"
            :on-remove="onRemove"
            :file-list="fileList"
            :headers="getAuthorization()"
          >
            <el-button size="small" plain>2.选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传1个模板文件(excel)，且不超过10M</div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button @click="uploadFileView()">3.预览数据</el-button>
          <el-button type="primary" @click="sourceRelease()" :disabled="isDisable">4.导入数据</el-button>
        </el-form-item>
      </el-form>
    </div>

    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      class="mytable-footer"
      height="500"
      :data="tableData"
      :sort-config="{ remote: true }"
      export-config
      show-overflow
      align="center"
    >
      <template v-slot:empty>
        <p> </p>
      </template>

      <vxe-table-column field="warehouseSerialNumber" title="仓库编码" min-width="120" />
      <vxe-table-column field="warehouseName" title="仓库名称" min-width="120" />
      <vxe-table-column field="shipmentSerialNumber" title="入驻商编码" min-width="120" />
      <vxe-table-column field="shipmentName" title="入驻商名称" min-width="120" />
      <vxe-table-column field="supplierCustomerNumber" title="供应商/客户编码" min-width="120" />
      <vxe-table-column field="supplierCustomerName" title="供应商/客户名称" min-width="120" />
      <vxe-table-column field="sourceCode" title="来源单号" min-width="120" />
      <vxe-table-column field="typeText" title="订单类型" min-width="120" />
      <vxe-table-column field="goodCode" title="商品编码" min-width="120" />
      <vxe-table-column field="goodsName" title="商品名称" min-width="120" />
      <vxe-table-column field="goodsUnitName" title="商品单位" min-width="120" />
      <vxe-table-column field="planQuantity" title="数量" min-width="120" />
      <vxe-table-column field="unitConvertText" title="单位换算" min-width="120" />
      <vxe-table-column field="basicUnitName" title="基本单位" min-width="120" />
      <vxe-table-column field="basicPlanQuantity" title="数量" min-width="120" />
      <vxe-table-column field="remarks" title="备注" min-width="150" />
    </vxe-table>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import request from "@/utils/request";
Vue.use(VXETable);
export default {
  data() {
    return {
      isDisable: false,
      fileList: [],
      // uploadUrl: process.env.VUE_APP_BASE_API + "arpa-tps-api/fileUpload",
      uploadUrl: this.uploadUrl,
      tableData: [],
      form: {
        filePath: "",
        isView: "2",
        type:"1",
        teamCode:"",
      }
    };
  },
  created() {
  },

  methods: {
    init() {
      this.isDisable = false,
      this.form.isView = 2;
      this.tableData = [];
      this.form.filePath = "";
      this.$refs.uploadExcel.clearFiles()
    },
    //上传文件预览
    uploadFileView() {
      if ("" == this.form.filePath) {
        return this.$message.warning("请先上传文件");
      }
      const rLoading = this.openLoading();
      request({
        url: `/wms/receive/importPreviewList`,
        params: { filePath: this.form.filePath , type: this.form.type},
        method: "post"
      }).then(
        response => {
        // rLoading.close();
        // console.log(response);
        this.tableData = response.data;
        this.$message({ message: response.msg, type: "success" });
        this.form.isView = 1;
      }).finally(() => {
        rLoading.close();
      })
    },
    downTemplate() {
      request({
        url: `https://wms2.obs.cn-north-4.myhuaweicloud.com/dianshang_receive.xlsx`,
        // params:{type: this.form.type},
        method: "get"
      }).then(response => {
        window.open(response.data);
      });
    },
    //上传
    sourceRelease() {
      if ("" == this.form.filePath) {
        return this.$message.warning("请先上传文件");
      }
      if (1 != this.form.isView) {
        return this.$message.warning(
          "请先预览后，再导入数据，并且不能重复导入"
        );
      }

      if(this.tableData.length == 0){
        return this.$message.warning(
          "数据为空，不能导入"
        );
      }
      this.isDisable = true;
      const rLoading = this.openLoading();
      request({
        url: `/wms/receive/importReceive`,
        params: {importCode: this.tableData[0]['importCode']},
        // params: { filePath: this.form.filePath, isView: this.form.isView },
        method: "post"
      }).then(response => {
        this.$message({ message: response.msg, type: "success" });
        this.form.isView = 2;
        this.isDisable = false;
        // rLoading.close();
        this.$emit("fatherUploadMethod");
      }).finally(() => {
        rLoading.close();
      })
    },
    // 上传成功回调
    handleSuccess(res, file) {
      this.$message({ message: res.msg, type: "success" });
      console.log(res);
      this.form.filePath = res.data;
    },
    //上传前校验
    beforeUploadFile(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xls" && extension !== "xlsx") {
        this.$message.error("只能上传excel文件");
        return false;
      }
      if (size > 10) {
        this.$message.error("上传文件大小不能超过 10MB!");
        return false;
      }
    },

    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$notify.error({
        title: "错误",
        message: `文件上传失败`
      });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onRemove(file, fileList) {
      this.form.isView = 2;
      this.tableData = [];
      this.form.filePath = "";
      this.isDisable = false;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    }
  }
};
</script>
<style>
</style>
